<template>
	<view class="yz">
		<view class="H5-Mask" @touchmove.stop.prevent="H5_Mask_Move" @click="H5_Mask_Cancel" v-if="H5_Mask"></view>
		<view v-if="position === 'top'" class="DropDown_top" :class="isShow_DropDown ? 'DropDown_show' : 'DropDown_hide_top'">
			<app-headers></app-headers>
			<slot name="header"></slot>
			<slot name="content"></slot>
		</view>
		<view v-if="position === 'bottom'" class="DropDown_bottom" :class="isShow_DropDown ? 'DropDown_show' : 'DropDown_hide_bottom'">
			<!-- <app-headers></app-headers> -->
			<slot name="header"></slot>
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
import headers from '../../common/components/AppHeader/index.vue'
export default {
	props: {
		isShow_H5_Mask: {
			type: [Boolean],
			default: false
		},
		position: {
			type: String,
			default: 'top'
		},
		isMask: {
			type: [Boolean],
			default: false
		}
	},
	components: { headers },
	naem: '',
	watch: {
		isShow_H5_Mask() {
			this.isMask ? (this.H5_Mask = this.isShow_H5_Mask) : '';
			this.isShow_DropDown = this.isShow_H5_Mask;
			// this.position=='bottom' && this.isShow_DropDown ?uni.hideTabBar({animation:true}):uni.showTabBar({animation:true})
			
			
			
			// this.position=='bottom' && this.isShow_DropDown ?uni.hideTabBar({animation:true}):setTimeout(()=>{uni.showTabBar({animation:true})},2000)
		}
	},
	data() {
		return {
			H5_Mask: false,
			isShow_DropDown: false
		};
	},
	methods: {
		H5_Mask_Move() {
			return;
		},
		H5_Mask_Cancel() {
			this.$emit('update:isShow_H5_Mask', false);
			this.$emit('close')
		}
	}
};
</script>

<style lang="less" scoped>
.DropDown_top {
	width: 100%;
	max-height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 0;
	 /* #ifdef  APP-PLUS  */
	// top: calc(var(--status-bar-height));
	// max-height: calc(100vh - var(--status-bar-height));
	/* #endif */ 
	left: 0;
	transition: 0.5s all;
	z-index: 999;
	/* height: 400rpx; */
	overflow: scroll;
}
.DropDown_bottom {
	width: 100%;
	max-height: 100vh;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	/* #ifdef  APP-PLUS  */
	// bottom: -50px;
	/*  #endif */
	left: 0;
	transition: 0.5s all;
	z-index: 99;
	overflow: scroll;
}
.DropDown_show {
	transform: translate3d(0, 0, 0);
}
.DropDown_hide_top {
	transform: translate3d(0, -150%, 0);
	//  #ifdef  APP-PLUS  */
	// top: - calc(var(--status-bar-height));
	// /*  #endif 
}
.DropDown_hide_bottom {
	transform: translate3d(0, 100%, 0);
}
.H5-Mask {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 98;
}
</style>
